<template>
 <div class="itemlist">
    <template v-for="(item,index) in itemdata" :key="index">
        <div class="item">
          <div class="itembody">
            <div class="left">
              <img :src="item.defaultPicture" alt="" class="img">
              <span class="number">{{ item.commentBrief?.commentBrief }}</span>
            </div>
            <div class="right">
              <div class="head"><p>{{ item.unitName }}</p></div>
              <div class="star">
                <van-rate :model-value="item.rankScore" color="#ffd21e" readonly allow-half />
              </div>
              <div class="infos">
              <div class="infoitem">{{ item.unitInfor }}</div>
              <div class="infoitem">{{ item.allActiveAndRedPacket?.memberName }}</div>
            </div>
              <div class="prices">
              <div class="oldprice price">原价:￥{{ item.productPrice }}</div>
              <div class="newprice price">优惠价:￥{{ item.finalPrice }}</div>
            </div>
            </div>
          </div>  
        </div>
    </template>
 </div>
</template>


<script setup>
const props=defineProps({
    itemdata:{
        type:Array,
        default:[]
    }
})


</script>


<style lang="less" scoped>
.itemlist{
  width: 100%;
  height: 667px;
  overflow-y: auto; //出现垂直滚动条
  padding-bottom: 50px; 
  .itembody{
    display: flex;
    flex-wrap: nowrap;
    margin-top: 10px;
    // background-color: #ccc;
    padding-left: 5px;
    .left{
      position: relative;
      padding-bottom: 10px;
      .img{
        width: 120px;
        height: 120px;
        border-radius: 10px;
      }
      .number{
        width: 50px;
        height: 25px;
        position: absolute;
        left: 0;
        right: 100px;
        top: 0;
        color: #ff9854;
        background-color: rgba(255,244,216);
        border-bottom-right-radius: 10px;
      }
    }
    .right{
      flex:1;
      padding-left: 20px;
      // display: flex;
      flex-wrap: wrap;
      .head{
        &>p{
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 700;
        }
      }
      .infos{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
        .infoitem{
          margin-right: 18px;
        }
      }
      .prices{
        margin-top: 10px;
        display: flex;
        justify-content: space-evenly;
        .price{
          margin-right: 20px;
        }  
        .oldprice{
          color: #999;
        }
        .newprice{
          color: red;
          font-size: 18px;
        }
      }

    }
  }
}

</style>